<script setup>
  import {addConnectListener, connect, state, setDappLocate} from "./dapp";
  import http from "./http";
  import {getCurrentInstance, watch} from "vue";
  import {useRoute} from "vue-router";
  import {useI18n} from 'vue-i18n'
  import OverLay from "@components/OverLay/index.vue";
  import BackGround from "@components/BackGround1/index.vue";

  const route = useRoute();

  let lang = localStorage.getItem("lang");
  if (!lang) {
    // lang = "zh-HK";
    lang = "en-US"
    localStorage.setItem("lang", lang);
  }

  const {t} = useI18n();

  http.setLocate(t)
  setDappLocate(t)

  const { proxy } = getCurrentInstance();
  proxy.$i18n.locale = lang;

  const check = () => {
    let userAgentInfo = navigator.userAgent;
    let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
      if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false; break;}
    }
    return flag;
  };
  let isPc = check();

  const setWidth = () => {
    if (window.innerWidth >= 750) {
      document.querySelector("html").style.fontSize = "75px";
      document.querySelector("html").style.width = "750px";
      document.querySelector("html").style.minHeight = "100%";
      document.querySelector("html").style.margin = "0 auto";
    } else {
      const minWidth = isPc ? 414 : 320;
      const width = window.innerWidth >= minWidth ? window.innerWidth : minWidth;
      document.querySelector("html").style.width = width + "px";
      if (window.innerWidth <= minWidth) {
        document.querySelector("html").style.fontSize = minWidth / 10 + "px";
      }
    }
  };

  setWidth();
  window.onresize = setWidth;

  watch(
    route,
    () => {
      window.scrollTo(0, 0);
    },
    { deep: true }
  );



  let _init = false;
  async function init() {
    if (_init) {
      return;
    }
    _init = true;
    addConnectListener(async () => {
        let res = await http.post(`/api/user/login`, false, true);
        if (res.code === 200) {
          let token = res.data;
          localStorage.setItem("token", token);
          state.loaded = true
        }
    });
    await connect(false);
    // state.loaded = true;
  }

  window.onload = init;
  setTimeout(init, 500);

</script>

<template>
  <router-view v-if="state.loaded !== undefined && state.loaded"></router-view>
  <div v-if="state.loaded !== undefined && !state.loaded" class="kos_connect_box">
    <BackGround >
      <div class="connect" @click="() => connect(false)">{{$t("connectWallet")}}</div>
    </BackGround>
  </div>
  <OverLay/>
</template>

<style lang="scss">
  .kos_connect_box{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    .connect{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      border-radius: 50px;
      border:2px solid $color3;
      width: 200px;
      height:50px;
      justify-content: center;
      align-items: center;
      display: flex;
      font-size:16px;
    }
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
  width: 100%;
  height: 100%;
}
</style>
